<template>
  <a-card :body-style="{ height: 'calc(100vh - 125px)' }">
    <!-- 数据列表 -->
    <a-row class="w-full h-full flex flex-col overflow-x-auto overflow-y-hidden">
      <!-- 查询条件 -->
      <a-row v-if="showSearchRow" class="w-full">
        <!-- 搜索区域内容已移除 -->
      </a-row>

      <!-- 分割线 -->
      <a-divider v-if="showSearchRow" class="mt-2"/>

      <!-- 数据操作区 -->
      <a-row class="w-full flex justify-between">
        <a-space>
          <!-- 添加 -->
          <a-button
              v-perm="['lindi:provinceIndex:add']"
              size="small"
              type="primary"
              @click="addBtnClick()"
          >
            <template #icon>
              <icon-plus/>
            </template>
            <template #default>添加</template>
          </a-button>
        </a-space>
        <a-space>
          <!-- 刷新 -->
          <a-button shape="circle" size="small" @click="getPageList(false)">
            <template #icon>
              <icon-refresh/>
            </template>
          </a-button>
          <!-- 收缩/展开 -->
          <a-button shape="circle" size="small" @click="showSearchRow = !showSearchRow">
            <template #icon>
              <icon-caret-up v-if="showSearchRow"/>
              <icon-caret-down v-else/>
            </template>
          </a-button>
        </a-space>
      </a-row>

      <!-- 数据展示区 -->
      <a-row class="w-full flex-1 mt-3 overflow-y-auto">
        <a-table
            :columns="datatable.columns"
            :data="datatable.records"
            :loading="datatable.loading"
            :pagination="false"
            :scroll="{ minWidth: 600, y: '100%' }"
            class="w-[100%]"
            row-key="provinceIndexId"
            table-layout-fixed
        >
          <template #provinceQuantity="{ record }">
            <a-link icon @click="detailBtnClick(record.provinceIndexId)">{{ record.provinceQuantity }}</a-link>
          </template>
          <!-- 操作 -->
          <template #operation="{ record }">
            <a-space>
              <a-button
                  v-perm="['lindi:provinceIndex:update']"
                  size="mini"
                  type="text"
                  @click="updateBtnClick(record.provinceIndexId)"
              >
                <template #icon>
                  <icon-edit/>
                </template>
                <template #default>修改</template>
              </a-button>
              <a-popconfirm
                  :content="`确定删除【${record.provinceQuantity}】吗?`"
                  type="warning"
                  @ok="onDeleteOK(record.provinceIndexId)"
              >
                <a-button
                    v-perm="['lindi:provinceIndex:delete']"
                    size="mini"
                    status="danger"
                    type="text"
                >
                  <template #icon>
                    <icon-delete/>
                  </template>
                  <template #default>删除</template>
                </a-button>
              </a-popconfirm>
            </a-space>
          </template>
        </a-table>
      </a-row>

      <!-- 分页 -->
      <a-row class="w-full mt-2">
        <a-pagination
            v-model:current="searchForm.pageNum"
            v-model:page-size="searchForm.pageSize"
            :total="datatable.total"
            class="w-[100%]"
            show-jumper
            show-page-size
            show-total
            size="small"
            @change="onPageChange"
        />
      </a-row>
    </a-row>

    <!-- 弹窗 -->
    <a-modal
        v-model:visible="modal.visible"
        :esc-to-close="false"
        :footer="false"
        :mask-closable="false"
        draggable
        width="700px"
    >
      <template #title>{{ modal.title }}</template>
      <component
          :is="modal.component"
          v-if="modal.visible"
          :params="modal.params"
          @cancel="onCancel"
          @ok="onOk"
      />
    </a-modal>
  </a-card>
</template>

<script setup>
import {getCurrentInstance, reactive, ref, shallowRef} from "vue";
import {deleteProvinceIndexByProvinceIndexIdApi, getPageProvinceIndexListApi} from "~/api/lindi/provinceIndex.js";
import ProvinceIndexDetail from "~/pages/lindi/provinceIndex/ProvinceIndexDetail.vue";
import ProvinceIndexEdit from "~/pages/lindi/provinceIndex/ProvinceIndexEdit.vue";

// 全局实例
const {proxy} = getCurrentInstance();
// 加载字典
const dicts = proxy.LoadDicts([]);
// 是否展示搜索区域
const showSearchRow = ref(true);
// 搜索参数表单
const searchForm = reactive({
  // 省级公益林指标亩数
  provinceQuantity: null,
  // 省级公益林指标交易量
  tradeQuantity: null,
  // 页码
  pageNum: 1,
  // 条数
  pageSize: 10,
});

// 数据列表
const datatable = reactive({
  // 列配置
  columns: [
    {
      title: "省级公益林指标(亩)",
      dataIndex: "provinceQuantity",
      slotName: "provinceQuantity",
      align: "center",
      width: 200
    },
    {
      title: "省级公益林指标交易量(亩)",
      dataIndex: "tradeQuantity",
      align: "center",
      width: 200
    },
    {
      title: "操作",
      dataIndex: "operation",
      slotName: "operation",
      align: "center",
      width: 100,
      fixed: "right",
    },
  ],
  // 数据
  records: [],
  // 总条数
  total: 0,
  // 加载状态
  loading: false,
});

// 弹窗
const modal = reactive({
  visible: false,
  title: "",
  component: null,
  params: {},
});

// 删除确认弹窗
const deleteConfirmVisible = ref(false);
// 删除的ID
const deleteIds = ref([]);

// 页面加载完成后，加载数据
getPageList(false);

// 获取分页数据
function getPageList(isReset) {
  if (isReset) {
    searchForm.provinceQuantity = null;
    searchForm.tradeQuantity = null;
    searchForm.pageNum = 1;
  }
  datatable.loading = true;
  getPageProvinceIndexListApi(searchForm)
      .then((res) => {
        datatable.records = res.records;
        datatable.total = res.total;
      })
      .finally(() => {
        datatable.loading = false;
      });
}

// 分页变化
function onPageChange() {
  getPageList(false);
}

// 添加按钮点击
function addBtnClick() {
  modal.title = "添加省级指标";
  modal.component = shallowRef(ProvinceIndexEdit);
  modal.params = {
    operationType: proxy.operationType.add.type,
  };
  modal.visible = true;
}

// 修改按钮点击
function updateBtnClick(provinceIndexId) {
  modal.title = "修改省级指标";
  modal.component = shallowRef(ProvinceIndexEdit);
  modal.params = {
    operationType: proxy.operationType.update.type,
    provinceIndexId: provinceIndexId,
  };
  modal.visible = true;
}

// 详情按钮点击
function detailBtnClick(provinceIndexId) {
  modal.title = "省级指标详情";
  modal.component = shallowRef(ProvinceIndexDetail);
  modal.params = {
    provinceIndexId: provinceIndexId,
  };
  modal.visible = true;
}

// 删除按钮点击
function deleteBtnClick(ids) {
  if (!ids || ids.length === 0) {
    proxy.$message.warning("请选择要删除的数据");
    return;
  }
  deleteIds.value = ids;
  deleteConfirmVisible.value = true;
}

// 删除确认
function onDeleteConfirmOK() {
  deleteConfirmVisible.value = false;
  // 批量删除
  const promises = deleteIds.value.map((id) => deleteProvinceIndexByProvinceIndexIdApi(id));
  Promise.all(promises)
      .then(() => {
        proxy.$message.success("删除成功");
        getPageList(false);
        selectedKeys.value = [];
      })
      .catch((error) => {
        proxy.$message.error("删除失败: " + error.message);
      });
}

// 删除取消
function onDeleteConfirmCancel() {
  deleteConfirmVisible.value = false;
}

// 单个删除确认
function onDeleteOK(id) {
  deleteProvinceIndexByProvinceIndexIdApi(id)
      .then(() => {
        proxy.$message.success("删除成功");
        getPageList(false);
      })
      .catch((error) => {
        proxy.$message.error("删除失败: " + error.message);
      });
}

// 弹窗确认
function onOk() {
  modal.visible = false;
  getPageList(false);
}

// 弹窗取消
function onCancel() {
  modal.visible = false;
}
</script>